<template>
	<view>
	<!-- #ifndef H5 -->
<!-- 	<view
		:style="{ height: statusHeight }"
		class="uni-status-bar"
	></view> -->
	<!-- #endif -->
	<view class="qinavbox">
		<view
			class="navboxleft iconfont"
			:class="navzuoicof"
			@tap="Tap_navout"
		>
		<!-- :class="navzuoicof ?navzuoicof: 'icon-icon-test59' " -->
			<slot name="left"></slot>
		</view>
		<view class="navbar"><slot name="center"></slot></view>
		<view class="navbarright  iconfont">
			<slot name="right"></slot>
		</view>
	</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
const Tap_navout = () => {
	uni.navigateBack();
};
const props = defineProps({
	navzuoicof: {
		type: String,
		default(){return ''
}	}
});
let statusHeight = ref(20);
onMounted(() => {
	statusHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
});
</script>

<style lang="scss">
.uni-status-bar {
	height: 20px;
}
.qinavbox {
	background: linear-gradient(to right, #3388ee, #4db9f1);
	height: 50px;
	line-height: 50px;
	justify-content: center;
	align-items: center;
	padding: 0 20px;
	color: #f8f8f8;
	// border: 0 none !important;
	.navbar {
		flex: 1;
		text-align: center;
	}
}
</style>
